<template>
  <div>
    <a-steps :current="current" :items="items"></a-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next"
        >Next</a-button
      >
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
        >Previous</a-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const current = ref(0);
const next = () => {
  current.value++;
};
const prev = () => {
  current.value--;
};
const steps = [
  {
    title: "创建游戏",
    content: "创建游戏",
  },
  {
    title: "完善资料",
    content: "请完善资料",
  },
  {
    title: "等待审核",
    content: "等待审核",
  },
  {
    title: "发布上线",
    content: "提交审核成功",
  },
];
const items = steps.map((item) => ({
  key: item.title,
  title: item.title,
}));
</script>
<style lang="less" scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

[data-theme="dark"] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>
